<template>
  <div class="progress">
    <el-row>
      <el-col>
        <el-row>
          <el-col :span="22" class="flex"
            ><img
              :src="icon"
              v-if="icon"
              :style="{
                width: iconSize ? iconSize[0] : '20px',
                height: iconSize ? iconSize[1] : '20px',
              }"
              alt=""
            />
            <span>{{ name }}</span>
          </el-col>
        </el-row>
        <el-row class="overHidden">
          <el-col
            class="row"
            :span="18"
            :style="{
              height: height ? height : '',
              border: border ? border : '',
              background: background ? background : '',
            }"
          >
            <div
              class="valueBox"
              :style="
                transitionStart
                  ? {
                      background: color,
                      marginLeft: -100 + (value / max) * 100 + '%',
                      botder: botder,
                    }
                  : {}
              "
            ></div>
            <div
              class="round"
              v-if="round"
              :style="
                transitionStart
                  ? {
                      background: color,
                      left: (value / max) * 100 + '%',
                    }
                  : {}
              "
            ></div></el-col
          ><el-col :offset="1" :span="5"
            ><span class="value">{{ value }}</span>
            <span class="unit">{{ unit }}</span></el-col
          ></el-row
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Progress",
  props: {
    name: { type: String, default: "" },
    icon: { type: String, default: "" },
    iconSize: {
      type: Array,
      default: () => {
        return ["26px", "26px"];
      },
    },
    height: { type: String, default: "8px" },
    value: { type: [String || Number], default: "" },
    max: { type: [String || Number], default: "" },
    unit: { type: String, default: "" },
    color: {
      type: String,
      default: "linear-gradient(90deg, #08B1FF 0%, #6BFFF3 99%)",
    },
    round: { type: Boolean, default: false },
    botder: { type: String, default: "" },
    border: { type: String, default: "" },
    background: { type: String, default: "" },
  },
  data() {
    return {
      transitionStart: false,
    };
  },
  created() {
    setTimeout(() => {
      this.transitionStart = true;
    });
  },
};
</script>

<style scoped lang="scss">
.progress {
  text-align: left;
  line-height: 30px;
  color: #ffffff;
  .overHidden {
    overflow: hidden;
    align-items: baseline;
    margin-top: -10px;
  }
  .row {
    height: 8px;
    // margin-top: 11px;
    position: relative;
    .valueBox {
      height: 100%;
      width: 100%;
      margin-left: -100%;
      transition: 0.6s;
    }
    .round {
      width: 14px;
      height: 14px;
      position: absolute;
      top: 0;
      left: 0;
      margin: -3px 0 0 -6px;
      border-radius: 50%;
      transition: 0.6s;
    }
  }
  .name {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
  }
  .value {
    font-size: 18px;
    font-weight: bold;
    color: #26dffe;
  }
  .unit {
    font-size: 14px;
    color: #fff;
  }
}
</style>
